<template>
    <div class="h_frame">
        <div ref="canvas" class="canvas" @mousedown="handleMouseDown" @mousemove="handleMouseMove"
            @mouseup="handleMouseUp" @wheel="handleWheel" :style="{
                width: width * scale + 'px',
                height: height * scale + 'px'
            }"></div>
    </div>
</template>
  
<script lang="ts">
import { defineComponent, ref, computed, onMounted, onUnmounted } from 'vue'

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useCanvasStore } from "@/store/canvasStore"; // 画布


/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

// const canvasStore = useCanvasStore(); // 画布


interface Point {
    x: number
    y: number
}

export default defineComponent({
    setup() {
        const store = useCanvasStore(); // 画布

        const canvas = ref<HTMLDivElement| null>(null)
        const isDragging = ref(false)
        const lastPosition = ref<Point>({ x: 0, y: 0 })
        const scale = ref(1)
        const offset = ref<Point>({ x: 0, y: 0 })

        const width = computed(() => store.canvasWidth)
        const height = computed(() => store.canvasHeight)

        const handleMouseDown = (event: MouseEvent) => {
            console.log("鼠标按下")
            if (event.button === 2) {
                isDragging.value = true
                lastPosition.value = { x: event.clientX, y: event.clientY }
            }
        }

        const handleMouseMove = (event: MouseEvent) => {
            console.log("鼠标移动")
            if (isDragging.value) {
                const dx = event.clientX - lastPosition.value.x
                const dy = event.clientY - lastPosition.value.y
                offset.value.x += dx / scale.value
                offset.value.y += dy / scale.value
                lastPosition.value = { x: event.clientX, y: event.clientY }
                draw()
            }
        }

        const handleMouseUp = () => {
            console.log("鼠标抬起")
            isDragging.value = false
        }

        const handleWheel = (event: WheelEvent) => {
            console.log("滚轮")
            const delta = event.deltaY > 0 ? -0.1 : 0.1
            scale.value += delta
            if (scale.value < 0.1) {
                scale.value = 0.1

            }
            console.log(scale.value)

        }

        const draw = () => {
            console.log("绘图")
        }

        onMounted(() => {
            if (!canvas.value) {
                return
            }
      
        })

        onUnmounted(() => {
       
        })

        return {
            canvas,
            width,
            height,
            scale,
            handleMouseDown,
            handleMouseMove,
            handleMouseUp,
            handleWheel,
        }
    },
})

</script>
<style>
.canvas {
    background-color: #454545;
    position: absolute;


}

.h_frame {
    width: 100vw;
    height: 100vh;
    overflow: scroll;
    position: relative;
}
</style>